<template>
</template>
<script>
import '@/assets/map/ol/ol.css';
import VectorLayer from 'ol/layer/Vector';
import {Cluster, Vector as VectorSource} from 'ol/source';
import Overlay from 'ol/Overlay';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import LineString from 'ol/geom/LineString';
import {Fill, Stroke, Style, Icon, Circle as CircleStyle,Text} from 'ol/style';
import {boundingExtent} from 'ol/extent';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';

export default {
  name: "BaseDataLayerMap",
  components: {

  },
  props:{
    map:{//地图对象
      type: Object,
      required:false,
      default: {}
    },
    selectFeatureProperties:{//选中要素的属性
      type: Object,
      required:false,
      default: {}
    },
    clickCoordinate:{//地图选中的经纬度
      type:Array,
      required:true,
      default: []
    },
    //基础数据图层显示
    showHideTextLayerBool: {//是否显示文字图层
      type:Boolean,
      required:true,
      default: false
    },
    rkgwLegendSelectData: {//人口建筑物经济公里格网图例选择数据
      type:Array,
      required:true,
      default: []
    },
    xzqhLayerBool: {//行政区划图层显示
      type:Boolean,
      required:true,
      default: false
    },
    xzqhAllData: {//行政区划图层数据
      type:Array,
      required:true,
      default: []
    },
    dxdmGcLayerBool: {//地形地貌（高程）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    dxdmGcAllData: {//地形地貌（高程）图层数据
      type:Array,
      required:true,
      default: []
    },
    elevationLegendData: {//地形地貌（高程）图层图例
      type:Array,
      required:true,
      default: []
    },
    dxdmPdLayerBool: {//地形地貌（坡度）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    dxdmPdAllData: {//地形地貌（坡度）图层数据
      type:Array,
      required:true,
      default: []
    },
    slopeLegendData: {//地形地貌（坡度）图层图例
      type:Array,
      required:true,
      default: []
    },
    rkgwLayerBool: {//人口建筑物经济公里格网图层显示
      type:Boolean,
      required:true,
      default: false
    },
    rkgwAllData: {//人口建筑物经济公里格网图层数据
      type:Array,
      required:true,
      default: []
    },
    jtDlLayerBool: {//交通（道路）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    jtDlAllData: {//交通（道路）图层数据
      type:Array,
      required:true,
      default: []
    },
    jtJcLayerBool: {//交通（机场）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    jtJcAllData: {//交通（机场）图层数据
      type:Array,
      required:true,
      default: []
    },
    skLayerBool: {//水库图层显示
      type:Boolean,
      required:true,
      default: false
    },
    skAllData: {//水库图层数据
      type:Array,
      required:true,
      default: []
    },
    schoolLayerBool: {//学校图层显示
      type:Boolean,
      required:true,
      default: false
    },
    schoolAllData: {//学校图层数据
      type:Array,
      required:true,
      default: []
    },
    dzzhLayerBool: {//地质灾害图层显示
      type:Boolean,
      required:true,
      default: false
    },
    dzzhAllData: {//地质灾害图层数据
      type:Array,
      required:true,
      default: []
    },
    dcLayerBool: {//断层图层显示
      type:Boolean,
      required:true,
      default: false
    },
    dcAllData: {//断层图层数据
      type:Array,
      required:true,
      default: []
    },
    csWhqyLayerBool: {//次生灾害危险源（危化企业）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    csWhqyAllData: {//次生灾害危险源（危化企业）图层数据
      type:Array,
      required:true,
      default: []
    },
    csJyzLayerBool: {//次生灾害危险源（加油站）图层显示
      type:Boolean,
      required:true,
      default: false
    },
    csJyzAllData: {//次生灾害危险源（加油站）图层数据
      type:Array,
      required:true,
      default: []
    },
    yjbncsLayerBool: {//应急避难场所图层显示
      type:Boolean,
      required:true,
      default: false
    },
    yjbncsAllData: {//应急避难场所图层数据
      type:Array,
      required:true,
      default: []
    },
    hospitalLayerBool: {//医院图层显示
      type:Boolean,
      required:true,
      default: false
    },
    hospitalAllData: {//医院图层数据
      type:Array,
      required:true,
      default: []
    },
    fwkznlLayerBool: {//房屋抗震能力分区图图层显示
      type:Boolean,
      required:true,
      default: false
    },
    fwkznlAllData: {//房屋抗震能力分区图图层数据
      type:Array,
      required:true,
      default: []
    },
  },
  emits:["showBaseDataDetailId"],
  data() {
    return {
      initBool:false,//是否完成初始化基础数据图层控件
      //基础数据图层start
      xzqhLayer:null,//行政区划图层
      dxdmGcLayer:null,//地形地貌（高程）图层
      dxdmPdLayer:null,//地形地貌（坡度）图层
      rkgwLayer:null,//人口建筑物经济公里格网图层
      jtDlLayer:null,//交通（道路）图层
      jtJcLayer:null,//交通（机场）图层
      skLayer:null,//水库图层
      schoolLayer:null,//学校图层
      dzzhLayer:null,//地质灾害图层
      dcLayer:null,//断层图层
      csWhqyLayer:null,//次生灾害危险源（危化企业）图层
      csJyzLayer:null,//次生灾害危险源（加油站）图层
      yjbncsLayer:null,//应急避难场所图层
      hospitalLayer:null,//医院图层
      fwkznlLayer:null,//房屋抗震能力分区图图层
      showTextLayerBool:false,//是否显示文字图层
      //基础数据图层end
      popupInfoLayer:null,//弹出窗口
      clickLonLat:null,//地图选中的经纬度
    }
  },
  watch: {
    map: {//地图对象
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地图对象");
          console.log(newVal);
          //初始化地图基础数据组件信息
          this.initMap();
        //}
      },
      immediate:true
    },
    selectFeatureProperties: {//选中要素的属性
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("选中要素的属性");
          console.log(newVal);
          if(newVal!=null && newVal.dataType!=undefined && newVal.dataType!=null) {//数据类型
            //数据类型
            let dataType = newVal.dataType;
            console.log(dataType);
            if(newVal.id!=undefined && newVal.id!=null) {//基础数据类型
              let id = newVal.id;
              console.log(dataType + "查看详情：" + id);
              if(dataType=="地形地貌（高程）" || dataType=="地形地貌（坡度）"){
                //地图选中经纬度
                if(this.clickLonLat!=null){
                  //设置弹窗内容
                  this.setPopupContent(newVal);
                  console.log(this.clickLonLat);
                  this.popupInfoLayer.setPosition(this.clickLonLat);
                }
              }else{
                let array = [id,dataType];
                this.$emit("showBaseDataDetailId",array);
              }
            }
          }
        //}
      },
      immediate:true
    },
    clickCoordinate: {//地图选中的经纬度
      handler: function(newVal,oldVal) {
        if (newVal != oldVal) {
          if(newVal!=null && newVal.length==2){
            //地图选中经纬度
            this.clickLonLat = this.getLonLat(newVal[0],newVal[1]);
          }else{
            this.clickLonLat = null;
          }
        }
      },
      immediate:true
    },
    //基础数据图层显示
    showHideTextLayerBool: {//是否显示文字图层
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("是否显示文字图层");
          console.log(newVal);
          this.showTextLayerBool = newVal;//是否显示文字图层
          //重新显示图层
          //行政区划图层数据显示
          this.showXzqhLayerData();
          //人口建筑物经济公里格网图层显示
          this.showRkgwLayerData();
          //交通（道路）图层显示
          this.showJtDlLayerData();
          //交通（机场）图层显示
          this.showJtJcLayerData();
          //水库图层显示
          this.showSkLayerData();
          //学校图层显示
          this.showSchoolLayerData();
          //地质灾害图层显示
          this.showDzzhLayerData();
          //断层图层显示
          this.showDcLayerData();
          //次生灾害危险源（危化企业）图层显示
          this.showCsWhqyLayerData();
          //次生灾害危险源（加油站）图层显示
          this.showCsJyzLayerData();
          //应急避难场所图层显示
          this.showYjbncsLayerData();
          //医院图层显示
          this.showHospitalLayerData();
          //房屋抗震能力分区图图层数据显示
          this.showFwkznlLayerData();
        //}
      },
      immediate:true
    },
    rkgwLegendSelectData: {//人口建筑物经济公里格网图例选择数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("人口建筑物经济公里格网图例选择数据");
          console.log(newVal);
          //人口建筑物经济公里格网图层显示
          this.showRkgwLayerData();
        //}
      },
      immediate:true
    },
    xzqhLayerBool: {//行政区划图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("行政区划图层显示");
        //}
      },
      immediate:true
    },
    xzqhAllData: {//行政区划图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("行政区划图层数据");
          //行政区划图层数据显示
          this.showXzqhLayerData();
        //}
      },
      immediate:true
    },
    dxdmGcLayerBool: {//地形地貌（高程）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（高程）图层显示");
        //}
      },
      immediate:true
    },
    dxdmGcAllData: {//地形地貌（高程）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（高程）图层数据");
          //地形地貌（高程）图层显示
          this.showDxdmGcLayerData();
        //}
      },
      immediate:true
    },
    elevationLegendData: {//地形地貌（高程）图层图例
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（高程）图层图例");
          console.log(newVal);
        //}
      },
      immediate:true
    },
    dxdmPdLayerBool: {//地形地貌（坡度）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（坡度）图层显示");
        //}
      },
      immediate:true
    },
    dxdmPdAllData: {//地形地貌（坡度）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（坡度）图层数据");
          //地形地貌（坡度）图层显示
          this.showDxdmPdLayerData();
        //}
      },
      immediate:true
    },
    slopeLegendData: {//地形地貌（坡度）图层图例
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地形地貌（坡度）图层图例");
          console.log(newVal);
        //}
      },
      immediate:true
    },
    rkgwLayerBool: {//人口建筑物经济公里格网图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("人口建筑物经济公里格网图层显示");
        //}
      },
      immediate:true
    },
    rkgwAllData: {//人口建筑物经济公里格网图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("人口建筑物经济公里格网图层数据");
          //人口建筑物经济公里格网图层显示
          this.showRkgwLayerData();
        //}
      },
      immediate:true
    },
    jtDlLayerBool: {//交通（道路）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("交通（道路）图层显示");
        //}
      },
      immediate:true
    },
    jtDlAllData: {//交通（道路）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("交通（道路）图层数据");
          //交通（道路）图层显示
          this.showJtDlLayerData();
        //}
      },
      immediate:true
    },
    jtJcLayerBool: {//交通（机场）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("交通（机场）图层显示");
        //}
      },
      immediate:true
    },
    jtJcAllData: {//交通（机场）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("交通（机场）图层数据");
          //交通（机场）图层显示
          this.showJtJcLayerData();
        //}
      },
      immediate:true
    },
    skLayerBool: {//水库图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("水库图层显示");
        //}
      },
      immediate:true
    },
    skAllData: {//水库图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("水库图层数据");
          //水库图层显示
          this.showSkLayerData();
        //}
      },
      immediate:true
    },
    schoolLayerBool: {//学校图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("学校图层显示");
        //}
      },
      immediate:true
    },
    schoolAllData: {//学校图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("学校图层数据");
          //学校图层显示
          this.showSchoolLayerData();
        //}
      },
      immediate:true
    },
    dzzhLayerBool: {//地质灾害图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地质灾害图层显示");
        //}
      },
      immediate:true
    },
    dzzhAllData: {//地质灾害图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("地质灾害图层数据");
          //地质灾害图层显示
          this.showDzzhLayerData();
        //}
      },
      immediate:true
    },
    dcLayerBool: {//断层图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("断层图层显示");
        //}
      },
      immediate:true
    },
    dcAllData: {//断层图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("断层图层数据");
          //断层图层显示
          this.showDcLayerData();
        //}
      },
      immediate:true
    },
    csWhqyLayerBool: {//次生灾害危险源（危化企业）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("次生灾害危险源（危化企业）图层显示");
        //}
      },
      immediate:true
    },
    csWhqyAllData: {//次生灾害危险源（危化企业）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("次生灾害危险源（危化企业）图层数据");
          //次生灾害危险源（危化企业）图层显示
          this.showCsWhqyLayerData();
        //}
      },
      immediate:true
    },
    csJyzLayerBool: {//次生灾害危险源（加油站）图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("次生灾害危险源（加油站）图层显示");
        //}
      },
      immediate:true
    },
    csJyzAllData: {//次生灾害危险源（加油站）图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("次生灾害危险源（加油站）图层数据");
          //次生灾害危险源（加油站）图层显示
          this.showCsJyzLayerData();
        //}
      },
      immediate:true
    },
    yjbncsLayerBool: {//应急避难场所图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("应急避难场所图层显示");
        //}
      },
      immediate:true
    },
    yjbncsAllData: {//应急避难场所图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("应急避难场所图层数据");
          //应急避难场所图层显示
          this.showYjbncsLayerData();
        //}
      },
      immediate:true
    },
    hospitalLayerBool: {//医院图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("医院图层显示");
        //}
      },
      immediate:true
    },
    hospitalAllData: {//医院图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("医院图层数据");
          //医院图层显示
          this.showHospitalLayerData();
        //}
      },
      immediate:true
    },
    fwkznlLayerBool: {//房屋抗震能力分区图图层显示
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("房屋抗震能力分区图图层显示");
        //}
      },
      immediate:true
    },
    fwkznlAllData: {//房屋抗震能力分区图图层数据
      handler: function(newVal,oldVal){
        //if(newVal!=oldVal){
          console.log("房屋抗震能力分区图图层数据");
          //房屋抗震能力分区图图层数据显示
          this.showFwkznlLayerData();
        //}
      },
      immediate:true
    },
  },
  mounted() {
    console.log("mounted地图基础数据组件异步加载");
    let that = this;
    //地图基础数据组件异步加载
    this.$nextTick(function(){
      console.log('地图基础数据组件异步加载');
      //地图基础数据组件异步加载
      setTimeout(() => {
        //初始化地图基础数据组件信息
        that.initMap();
      }, 200);
    });
  },
  methods: {
    initMap() {
      if(this.map!=null && this.map.getSize()!=null){
        if(this.initBool){//是否完成初始化基础数据图层控件
          return;
        }
        console.log('initMap地图基础数据组件异步加载');
        //////////////////////////////////////////////基础数据图层start
        //行政区划图层
        this.xzqhLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.xzqhLayer);
        this.xzqhLayer.setZIndex(1);

        //地形地貌（高程）图层
        this.dxdmGcLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.dxdmGcLayer);
        this.dxdmGcLayer.setZIndex(2);

        //地形地貌（坡度）图层
        this.dxdmPdLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.dxdmPdLayer);
        this.dxdmPdLayer.setZIndex(2);

        //人口建筑物经济公里格网图层
        this.rkgwLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.rkgwLayer);
        this.rkgwLayer.setZIndex(2);

        //交通（道路）图层
        this.jtDlLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.jtDlLayer);
        this.jtDlLayer.setZIndex(4);

        //交通（机场）图层
        this.jtJcLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.jtJcLayer);
        this.jtJcLayer.setZIndex(5);

        //水库图层
        this.skLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.skLayer);
        this.skLayer.setZIndex(5);

        //学校图层
        this.schoolLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.schoolLayer);
        this.schoolLayer.setZIndex(5);

        //地质灾害图层
        this.dzzhLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.dzzhLayer);
        this.dzzhLayer.setZIndex(5);

        //断层图层
        this.dcLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.dcLayer);
        this.dcLayer.setZIndex(4);

        //次生灾害危险源（危化企业）图层
        this.csWhqyLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.csWhqyLayer);
        this.csWhqyLayer.setZIndex(5);

        //次生灾害危险源（加油站）图层
        this.csJyzLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.csJyzLayer);
        this.csJyzLayer.setZIndex(5);

        //应急避难场所图层
        this.yjbncsLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.yjbncsLayer);
        this.yjbncsLayer.setZIndex(5);

        //医院图层
        this.hospitalLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.hospitalLayer);
        this.hospitalLayer.setZIndex(5);

        //房屋抗震能力分区图图层图层
        this.fwkznlLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: false
          }),
          projection: 'EPSG:4490'
        });
        this.map.addLayer(this.fwkznlLayer);
        this.fwkznlLayer.setZIndex(3);
        //////////////////////////////////////////////基础数据图层end
        //弹出窗口
        this.popupInfoLayer = new Overlay({
          element: document.createElement('div'),
          positioning: 'center-center'
        });
        this.map.addOverlay(this.popupInfoLayer);
        this.popupInfoLayer.setPosition(undefined);

        //是否完成初始化基础数据图层控件
        this.initBool = true;
      }
    },
    getTextFormat(str){//格式化文本内容
      if(str==null || str==undefined){
        str = "";
      }
      return str;
    },
    getPolyonStyle(color,backgroundColor){//多边形样式
      if(backgroundColor==null){
        backgroundColor = "rgba(0,0,0,0)";
      }
      let style = new Style({
        fill:new Fill({//填充样式
          color:backgroundColor
        }),
        stroke:new Stroke({//描绘
          width:2,//宽
          color:color
        })
      });

      return style;
    },
    getPolyonTextStyle(color,backgroundColor,text){//多边形文字样式
      if(backgroundColor==null){
        backgroundColor = "rgba(0,0,0,0)";
      }
      let style = new Style({
        fill:new Fill({//填充样式
          color:backgroundColor
        }),
        stroke:new Stroke({//描绘
          width:2,//宽
          color:color
        }),
        text: new Text({
          text: text,
          fill: new Fill({
            color: 'blue'
          }),
          offsetY:0
        })
      });

      return style;
    },
    getPointStyle(){//点图标样式
      let style = new Style({
        image: new Icon({
          src: dingweiImg,
          /*anchor: [0.5, 1]*/
          anchor: [0.5, 0.8]
        }),
      });

      return style;
    },
    getPointStyleByColor(fillColor,text,radius){//圆点样式
      let style = null;
      if(radius==null){
        radius = 5;
      }
      //显示文字
      if(this.showTextLayerBool){
        style = new Style({
          image: new CircleStyle({
            radius: radius,
            fill: new Fill({
              color: fillColor,
            }),
          }),
          text: new Text({
            text: text,
            fill: new Fill({
              color: 'black'
            }),
            stroke:new Stroke({//线
              width:2,//宽
              color:"white"
            }),
            offsetY:-10
          })
        });
      }else{
        style = new Style({
          image: new CircleStyle({
            radius: radius,
            fill: new Fill({
              color: fillColor,
            }),
          })
        });
      }

      return style;
    },
    getPointTextStyle(radius,color,str,type){//点图标文字样式
      //设定地震序号点
      let style = null;
      if(type=="设定地震"){
        style = new Style({
          image: new CircleStyle({
            radius: radius,
            stroke: new Stroke({
              color: "black",
              width: 1
            }),
            fill: new Fill({
              color: "red"
            })
          }),
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'black'
            })
          })
        });
      }else if(type=="省"){
        style = new Style({
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'red'
            })
          })
        });
      }else if(type=="市"){
        style = new Style({
          image: new CircleStyle({
            radius: radius,
            stroke: new Stroke({
              color: "black",
              width: 1
            }),
            fill: new Fill({
              color: "red"
            })
          }),
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'black'
            })
          })
        });
      }else if(type=="区县"){
        style = new Style({
          image: new CircleStyle({
            radius: 2,
            stroke: new Stroke({
              color: "black",
              width: 1
            })
          }),
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'black'
            })
          })
        });
      }else if(type=="乡镇"){
        style = new Style({
          image: new CircleStyle({
            radius: 2,
            stroke: new Stroke({
              color: "black",
              width: 1
            })
          }),
          text: new Text({
            text: str,
            fill: new Fill({
              color: 'black'
            })
          })
        });
      }

      return style;
    },
    getLineStringStyle(color,text){//线样式
      let style = null;
      //显示文字
      if(this.showTextLayerBool){
        style = new Style({
          fill:new Fill({//填充样式
            color:"rgba(0,0,0,0)"
          }),
          stroke:new Stroke({//线
            width:2,//宽
            color:color
          }),
          text: new Text({
            text: text,
            fill: new Fill({
              color: 'black'
            }),
            stroke:new Stroke({//线
              width:2,//宽
              color:"white"
            }),
            offsetY:-5
          })
        });
      }else{
        style = new Style({
          fill:new Fill({//填充样式
            color:"rgba(0,0,0,0)"
          }),
          stroke:new Stroke({//线
            width:2,//宽
            color:color
          })
        });
      }

      return style;
    },
    //处理经纬度
    getLonLat(longitude,latitude){
      let lonlat = null;
      if(longitude!=null && latitude!=null && longitude!="" && latitude!=""){
        let lon = Number(longitude);
        let lat = Number(latitude);
        if(lon>0 && lon<180 && lat>0 && lat<90){
          lonlat = [lon,lat];
        }
      }

      return lonlat;
    },
    //缩放到区域位置
    showBoundingExtent(coordinates){
      console.log("缩放到区域位置");
      if (this.map!=null && coordinates!=null && coordinates.length > 1) {
        //console.log(coordinates);
        let extent = boundingExtent(coordinates);
        //this.map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]});
        this.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
      }
    },
    /////////////////////////////基础数据图层start
    //行政区划图层数据显示
    showXzqhLayerData(){
      let list = this.xzqhAllData;
      if(list!=null && list.length>0){
        if(this.xzqhLayer!=null){
          //清空图层
          this.xzqhLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].areaId;//主键ID
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText!="" && geomText.indexOf("MULTIPOLYGON(((")!=-1){
              let coords_str = geomText.split("MULTIPOLYGON(((")[1].split(")))")[0];
              if(coords_str.indexOf(")),((")!=-1){
                console.log("多个的面");
              }
              let geometries = coords_str.split(")),((");
              //console.log("geometries: ", geometries.length);
              for (let k = 0;k < geometries.length;k++) {
                //console.log(geometries[k]);
                let allPointsArr = [];
                if(coords_str.indexOf("),(")!=-1){
                  console.log("镂空的面");
                }
                let __coords = geometries[k].split("),(");
                //console.log("__coords: ", __coords.length);
                for (let m = 0;m < __coords.length;m++) {
                  let _coords = __coords[m].split(","), points = [];
                  //console.log(_coords);
                  for (let n = 0;n < _coords.length;n++) {
                    if(_coords[n]!=null && _coords[n]!=""){
                      let coord = _coords[n].split(" ");
                      let lon = Number(coord[0]), lat = Number(coord[1]);
                      let lonlat = [lon, lat];
                      points.push(lonlat);
                      //全部经纬度
                      allCoordinates.push(lonlat);
                    }
                  }
                  allPointsArr.push(points);
                }
                //console.log(allPointsArr);
                //多边形
                let featureTmp = new Feature({
                  geometry: new Polygon(allPointsArr)
                });
                //样式
                let style = this.getPolyonStyle("rgb(5 5 233)",null);
                featureTmp.setStyle(style);
                //设置属性
                featureTmp.setProperties({id: id,dataType:"行政区划"});
                //添加行政区划
                this.xzqhLayer.getSource().addFeature(featureTmp);
              }
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.xzqhLayer!=null){
          //清空图层
          this.xzqhLayer.getSource().clear();
        }
      }
    },
    //人口建筑物经济公里格网图层显示
    showRkgwLayerData(){
      let list = this.rkgwAllData;
      if(list!=null && list.length>0){
        if(this.rkgwLayer!=null){
          //图例设置样式
          let legendSelectData = this.rkgwLegendSelectData;
          let legendType = "";
          let legendArray = [];
          if(legendSelectData.length==2){
            legendType = legendSelectData[0];
            for(let i=0;i<legendSelectData[1].length;i++){
              let legendName = legendSelectData[1][i].name;
              let legendColor = legendSelectData[1][i].color;
              if(legendName.indexOf("以上")==-1){
                let legendArr = legendName.split("-");
                let minLegend = Number(legendArr[0]);
                let maxLegend = Number(legendArr[1]);
                legendArray.push([minLegend,maxLegend,legendColor]);
              }else{
                let minLegend = Number(legendName.split("以上")[0]);
                let maxLegend = null;
                legendArray.push([minLegend,maxLegend,legendColor]);
              }
            }
          }
          //清空图层
          this.rkgwLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].pbeId;//主键ID
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText!="" && geomText.indexOf("MULTIPOLYGON(((")!=-1){
              let coords_str = geomText.split("MULTIPOLYGON(((")[1].split(")))")[0];
              if(coords_str.indexOf(")),((")!=-1){
                console.log("多个的面");
              }
              let geometries = coords_str.split(")),((");
              for (let k = 0;k < geometries.length;k++) {
                //console.log(geometries[k]);
                let allPointsArr = [];
                if(coords_str.indexOf("),(")!=-1){
                  console.log("镂空的面");
                }
                let __coords = geometries[k].split("),(");
                for (let m = 0;m < __coords.length;m++) {
                  let _coords = __coords[m].split(","), points = [];
                  //console.log(_coords);
                  for (let n = 0;n < _coords.length;n++) {
                    if(_coords[n]!=null && _coords[n]!=""){
                      let coord = _coords[n].split(" ");
                      let lon = Number(coord[0]), lat = Number(coord[1]);
                      let lonlat = [lon, lat];
                      points.push(lonlat);
                      //全部经纬度
                      allCoordinates.push(lonlat);
                    }
                  }
                  allPointsArr.push(points);
                }
                console.log(allPointsArr);
                //多边形
                let featureTmp = new Feature({
                  geometry: new Polygon(allPointsArr)
                });
                let backgroundColor = null;
                //图例样式设置
                if(legendType=="人口"){
                  let population = list[i].population;
                  //根据值和图例样式数组获取颜色
                  backgroundColor = this.getColorByLegendArray(legendArray,population);
                }else if(legendType=="建筑物"){
                  let coveredarea = list[i].coveredarea;
                  //根据值和图例样式数组获取颜色
                  backgroundColor = this.getColorByLegendArray(legendArray,coveredarea);
                }else if(legendType=="经济"){
                  let gdp = list[i].gdp;
                  //根据值和图例样式数组获取颜色
                  backgroundColor = this.getColorByLegendArray(legendArray,gdp);
                }
                //样式
                let style = this.getPolyonStyle("orange",backgroundColor);
                featureTmp.setStyle(style);
                //设置属性
                featureTmp.setProperties({id: id,dataType:"人口建筑物经济公里格网"});
                //添加人口建筑物经济公里格网
                this.rkgwLayer.getSource().addFeature(featureTmp);
              }
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.rkgwLayer!=null){
          //清空图层
          this.rkgwLayer.getSource().clear();
        }
      }
    },
    //根据值和图例样式数组获取颜色
    getColorByLegendArray(legendArray,value){
      let color = "orange";
      //console.log("根据值和图例样式数组获取颜色:"+value);
      //console.log(legendArray);
      for(let i=0;i<legendArray.length;i++){
        let min = legendArray[i][0];
        let max = legendArray[i][1];
        if(value>=min){
          if(max!=null){
            if(value<=max){
              color = legendArray[i][2];
              break;
            }
          }else{
            color = legendArray[i][2];
            break;
          }
        }
      }
      //console.log(color);

      return color;
    },
    //交通（道路）图层显示
    showJtDlLayerData(){
      let list = this.jtDlAllData;
      if(list!=null && list.length>0){
        if(this.jtDlLayer!=null){
          //清空图层
          this.jtDlLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].roadName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            if(geomText!="" && geomText.indexOf("MULTILINESTRING((")!=-1){
              let coords_str = geomText.split("MULTILINESTRING((")[1].split("))")[0];
              if(coords_str.indexOf("),(")!=-1){
                console.log("多个的线");
              }
              let geometries = coords_str.split("),(");
              console.log("geometries: ", geometries.length);
              for (let k = 0;k < geometries.length;k++) {
                let allPointsArr = [];
                let _coords = geometries[k].split(",");
                if(_coords.length>0){
                  for (let n = 0;n < _coords.length;n++) {
                    if(_coords[n]!=null && _coords[n]!=""){
                      let coord = _coords[n].split(" ");
                      let lon = Number(coord[0]), lat = Number(coord[1]);
                      let lonlat = [lon, lat];
                      allPointsArr.push(lonlat);
                      //全部经纬度
                      allCoordinates.push(lonlat);
                    }
                  }
                  console.log(allPointsArr);
                  //线
                  let featureTmp = new Feature({
                    geometry: new LineString(allPointsArr)
                  });
                  //样式
                  let style = this.getLineStringStyle("black",name);
                  featureTmp.setStyle(style);
                  //设置属性
                  featureTmp.setProperties({id: id,dataType:"交通（道路）",name:name});
                  //添加交通（道路）
                  this.jtDlLayer.getSource().addFeature(featureTmp);
                }
              }
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.jtDlLayer!=null){
          //清空图层
          this.jtDlLayer.getSource().clear();
        }
      }
    },
    //交通（机场）图层显示
    showJtJcLayerData(){
      let list = this.jtJcAllData;
      if(list!=null && list.length>0){
        if(this.jtJcLayer!=null){
          //清空图层
          this.jtJcLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].airportName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            //经纬度
            let longitude = list[i].airportLongitude;
            let latitude = list[i].airportLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("green",name,null);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"交通（机场）",name:name});
              //添加机场
              this.jtJcLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.jtJcLayer!=null){
          //清空图层
          this.jtJcLayer.getSource().clear();
        }
      }
    },
    //水库图层显示
    showSkLayerData(){
      let list = this.skAllData;
      if(list!=null && list.length>0){
        if(this.skLayer!=null){
          //清空图层
          this.skLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].resName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            //经纬度
            let longitude = list[i].resLongitude;
            let latitude = list[i].resLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("blue",name,null);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"水库",name:name});
              //添加水库
              this.skLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.skLayer!=null){
          //清空图层
          this.skLayer.getSource().clear();
        }
      }
    },
    //学校图层显示
    showSchoolLayerData(){
      let list = this.schoolAllData;
      if(list!=null && list.length>0){
        if(this.schoolLayer!=null){
          //清空图层
          this.schoolLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].schName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            //经纬度
            let longitude = list[i].schReslongitude;
            let latitude = list[i].schReslatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("blue",name,2);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"学校",name:name});
              //添加学校
              this.schoolLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.schoolLayer!=null){
          //清空图层
          this.schoolLayer.getSource().clear();
        }
      }
    },
    //地质灾害图层显示
    showDzzhLayerData(){
      let list = this.dzzhAllData;
      if(list!=null && list.length>0){
        if(this.dzzhLayer!=null){
          //清空图层
          this.dzzhLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].dgdName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            //经纬度
            let longitude = list[i].dgdReslongitude;
            let latitude = list[i].dgdReslatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("red",name,null);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"地质灾害",name:name});
              //添加地质灾害
              this.dzzhLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.dzzhLayer!=null){
          //清空图层
          this.dzzhLayer.getSource().clear();
        }
      }
    },
    //断层图层显示
    showDcLayerData(){
      let list = this.dcAllData;
      if(list!=null && list.length>0){
        if(this.dcLayer!=null){
          //清空图层
          this.dcLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].fauId;//主键ID
            let name = list[i].fauName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            if(geomText!="" && geomText.indexOf("MULTILINESTRING((")!=-1){
              let coords_str = geomText.split("MULTILINESTRING((")[1].split("))")[0];
              if(coords_str.indexOf("),(")!=-1){
                console.log("多个的线");
              }
              let geometries = coords_str.split("),(");
              console.log("geometries: ", geometries.length);
              for (let k = 0;k < geometries.length;k++) {
                let allPointsArr = [];
                let _coords = geometries[k].split(",");
                if(_coords.length>0){
                  for (let n = 0;n < _coords.length;n++) {
                    if(_coords[n]!=null && _coords[n]!=""){
                      let coord = _coords[n].split(" ");
                      let lon = Number(coord[0]), lat = Number(coord[1]);
                      let lonlat = [lon, lat];
                      allPointsArr.push(lonlat);
                      //全部经纬度
                      allCoordinates.push(lonlat);
                    }
                  }
                  console.log(allPointsArr);
                  //线
                  let featureTmp = new Feature({
                    geometry: new LineString(allPointsArr)
                  });
                  //样式
                  let style = this.getLineStringStyle("red",name);
                  featureTmp.setStyle(style);
                  //设置属性
                  featureTmp.setProperties({id: id,dataType:"断层",name:name});
                  //添加断层
                  this.dcLayer.getSource().addFeature(featureTmp);
                }
              }
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.dcLayer!=null){
          //清空图层
          this.dcLayer.getSource().clear();
        }
      }
    },
    //次生灾害危险源（危化企业）图层显示
    showCsWhqyLayerData(){
      let list = this.csWhqyAllData;
      if(list!=null && list.length>0){
        if(this.csWhqyLayer!=null){
          //清空图层
          this.csWhqyLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].redName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            //经纬度
            let longitude = list[i].redLongitude;
            let latitude = list[i].redLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("purple",name,null);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"次生灾害危险源（危化企业）",name:name});
              //添加次生灾害危险源（危化企业）
              this.csWhqyLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.csWhqyLayer!=null){
          //清空图层
          this.csWhqyLayer.getSource().clear();
        }
      }
    },
    //次生灾害危险源（加油站）图层显示
    showCsJyzLayerData(){
      let list = this.csJyzAllData;
      if(list!=null && list.length>0){
        if(this.csJyzLayer!=null){
          //清空图层
          this.csJyzLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].gsName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            //经纬度
            let longitude = list[i].gsLongitude;
            let latitude = list[i].gsLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("deeppink",name,null);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"次生灾害危险源（加油站）",name:name});
              //添加次生灾害危险源（加油站）
              this.csJyzLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.csJyzLayer!=null){
          //清空图层
          this.csJyzLayer.getSource().clear();
        }
      }
    },
    //应急避难场所图层显示
    showYjbncsLayerData(){
      let list = this.yjbncsAllData;
      if(list!=null && list.length>0){
        if(this.yjbncsLayer!=null){
          //清空图层
          this.yjbncsLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].esName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            //经纬度
            let longitude = list[i].esLongitude;
            let latitude = list[i].esLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("hotpink",name,null);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"应急避难场所",name:name});
              //添加应急避难场所
              this.yjbncsLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.yjbncsLayer!=null){
          //清空图层
          this.yjbncsLayer.getSource().clear();
        }
      }
    },
    //医院图层显示
    showHospitalLayerData(){
      let list = this.hospitalAllData;
      if(list!=null && list.length>0){
        if(this.hospitalLayer!=null){
          //清空图层
          this.hospitalLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].id;//主键ID
            let name = list[i].dhName;//名称
            let geomText = this.getTextFormat(list[i].geomText);
            //console.log("geomText");
            //console.log(geomText);
            //经纬度
            let longitude = list[i].dhLongitude;
            let latitude = list[i].dhLatitude;
            //处理经纬度
            let lonlat = this.getLonLat(longitude,latitude)
            if(lonlat!=null){
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = this.getPointStyleByColor("brown",name,2);
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties({id: id,dataType:"医院",name:name});
              //添加医院
              this.hospitalLayer.getSource().addFeature(featureTmp);
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.hospitalLayer!=null){
          //清空图层
          this.hospitalLayer.getSource().clear();
        }
      }
    },
    //房屋抗震能力分区图图层数据显示
    showFwkznlLayerData(){
      let list = this.fwkznlAllData;
      if(list!=null && list.length>0){
        if(this.fwkznlLayer!=null){
          //清空图层
          this.fwkznlLayer.getSource().clear();
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].kztId;//主键ID
            let geomText = this.getTextFormat(list[i].geomText);
            if(geomText!="" && geomText.indexOf("MULTIPOLYGON(((")!=-1){
              let coords_str = geomText.split("MULTIPOLYGON(((")[1].split(")))")[0];
              if(coords_str.indexOf(")),((")!=-1){
                console.log("多个的面");
              }
              let geometries = coords_str.split(")),((");
              console.log("geometries: ", geometries.length);
              for (let k = 0;k < geometries.length;k++) {
                //console.log(geometries[k]);
                let allPointsArr = [];
                if(coords_str.indexOf("),(")!=-1){
                  console.log("镂空的面");
                }
                let __coords = geometries[k].split("),(");
                console.log("__coords: ", __coords.length);
                for (let m = 0;m < __coords.length;m++) {
                  let _coords = __coords[m].split(","), points = [];
                  //console.log(_coords);
                  for (let n = 0;n < _coords.length;n++) {
                    if(_coords[n]!=null && _coords[n]!=""){
                      let coord = _coords[n].split(" ");
                      let lon = Number(coord[0]), lat = Number(coord[1]);
                      let lonlat = [lon, lat];
                      points.push(lonlat);
                      //全部经纬度
                      allCoordinates.push(lonlat);
                    }
                  }
                  allPointsArr.push(points);
                }
                console.log(allPointsArr);
                //多边形
                let featureTmp = new Feature({
                  geometry: new Polygon(allPointsArr)
                });
                //样式
                let style = this.getPolyonStyle("lightcoral",null);
                featureTmp.setStyle(style);
                //设置属性
                featureTmp.setProperties({id: id,dataType:"房屋抗震能力分区图"});
                //添加房屋抗震能力分区图
                this.fwkznlLayer.getSource().addFeature(featureTmp);
              }
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.fwkznlLayer!=null){
          //清空图层
          this.fwkznlLayer.getSource().clear();
        }
      }
    },
    //地形地貌（高程）图层显示
    showDxdmGcLayerData(){
      let list = this.dxdmGcAllData;
      if(list!=null && list.length>0){
        if(this.dxdmGcLayer!=null){
          //清空图层
          this.dxdmGcLayer.getSource().clear();
          console.log("地形地貌（高程）图层显示list");
          //图例设置样式
          let legendArray = this.getLegendArrayByData(this.elevationLegendData);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].fileUuid;//文件UUID
            let elevationNumber = list[i].elevationNumber;//高程数值
            let geomText = this.getTextFormat(list[i].geom);
            if(geomText!="" && geomText.indexOf("MULTIPOLYGON(((")!=-1){
              let coords_str = geomText.split("MULTIPOLYGON(((")[1].split(")))")[0];
              if(coords_str.indexOf(")),((")!=-1){
                //console.log("多个的面");
              }
              let geometries = coords_str.split(")),((");
              for (let k = 0;k < geometries.length;k++) {
                //console.log(geometries[k]);
                let allPointsArr = [];
                if(coords_str.indexOf("),(")!=-1){
                  //console.log("镂空的面");
                }
                let __coords = geometries[k].split("),(");
                for (let m = 0;m < __coords.length;m++) {
                  let _coords = __coords[m].split(","), points = [];
                  //console.log(_coords);
                  for (let n = 0;n < _coords.length;n++) {
                    if(_coords[n]!=null && _coords[n]!=""){
                      let coord = _coords[n].split(" ");
                      let lon = Number(coord[0]), lat = Number(coord[1]);
                      let lonlat = [lon, lat];
                      points.push(lonlat);
                      //全部经纬度
                      allCoordinates.push(lonlat);
                    }
                  }
                  allPointsArr.push(points);
                }
                //console.log(allPointsArr);
                //多边形
                let featureTmp = new Feature({
                  geometry: new Polygon(allPointsArr)
                });
                //根据值和图例样式数组获取颜色
                let backgroundColor = this.getColorByLegendArray(legendArray,elevationNumber);
                //样式
                let style = this.getPolyonStyle(backgroundColor,backgroundColor);
                featureTmp.setStyle(style);
                //设置属性
                featureTmp.setProperties({id: id,dataType:"地形地貌（高程）",elevationNumber:elevationNumber});
                //添加地形地貌（高程）
                this.dxdmGcLayer.getSource().addFeature(featureTmp);
              }
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.dxdmGcLayer!=null){
          //清空图层
          this.dxdmGcLayer.getSource().clear();
        }
      }
    },
    //地形地貌（坡度）图层显示
    showDxdmPdLayerData(){
      let list = this.dxdmPdAllData;
      if(list!=null && list.length>0){
        if(this.dxdmPdLayer!=null){
          //清空图层
          this.dxdmPdLayer.getSource().clear();
          console.log("地形地貌（坡度）图层显示list");
          //图例设置样式
          let legendArray = this.getLegendArrayByData(this.slopeLegendData);
          let allCoordinates = [];//全部经纬度
          for(let i=0;i<list.length;i++){
            let id = list[i].fileUuid;//文件UUID
            let slopeNumber = list[i].slopeNumber;//坡度数值
            let geomText = this.getTextFormat(list[i].geom);
            if(geomText!="" && geomText.indexOf("MULTIPOLYGON(((")!=-1){
              let coords_str = geomText.split("MULTIPOLYGON(((")[1].split(")))")[0];
              if(coords_str.indexOf(")),((")!=-1){
                //console.log("多个的面");
              }
              let geometries = coords_str.split(")),((");
              for (let k = 0;k < geometries.length;k++) {
                //console.log(geometries[k]);
                let allPointsArr = [];
                if(coords_str.indexOf("),(")!=-1){
                  //console.log("镂空的面");
                }
                let __coords = geometries[k].split("),(");
                for (let m = 0;m < __coords.length;m++) {
                  let _coords = __coords[m].split(","), points = [];
                  //console.log(_coords);
                  for (let n = 0;n < _coords.length;n++) {
                    if(_coords[n]!=null && _coords[n]!=""){
                      let coord = _coords[n].split(" ");
                      let lon = Number(coord[0]), lat = Number(coord[1]);
                      let lonlat = [lon, lat];
                      points.push(lonlat);
                      //全部经纬度
                      allCoordinates.push(lonlat);
                    }
                  }
                  allPointsArr.push(points);
                }
                //console.log(allPointsArr);
                //多边形
                let featureTmp = new Feature({
                  geometry: new Polygon(allPointsArr)
                });
                //根据值和图例样式数组获取颜色
                let backgroundColor = this.getColorByLegendArray(legendArray,slopeNumber);
                //样式
                let style = this.getPolyonStyle(backgroundColor,backgroundColor);
                featureTmp.setStyle(style);
                //设置属性
                featureTmp.setProperties({id: id,dataType:"地形地貌（坡度）",slopeNumber:slopeNumber});
                //添加地形地貌（坡度）
                this.dxdmPdLayer.getSource().addFeature(featureTmp);
              }
            }
          }
          //缩放到区域位置
          this.showBoundingExtent(allCoordinates);
        }
      }else{
        if(this.dxdmPdLayer!=null){
          //清空图层
          this.dxdmPdLayer.getSource().clear();
        }
      }
    },
    //获取图例数组
    getLegendArrayByData(legendSelectData){
      //图例设置样式
      let legendArray = [];
      if(legendSelectData!=null && legendSelectData.length>0){
        for(let i=0;i<legendSelectData.length;i++){
          let legendName = legendSelectData[i].name;
          let legendColor = legendSelectData[i].color;
          if(legendName.indexOf("以上")==-1){
            let legendArr = legendName.split("-");
            let minLegend = Number(legendArr[0]);
            let maxLegend = Number(legendArr[1]);
            legendArray.push([minLegend,maxLegend,legendColor]);
          }else{
            let minLegend = Number(legendName.split("以上")[0]);
            let maxLegend = null;
            legendArray.push([minLegend,maxLegend,legendColor]);
          }
        }
      }

      return legendArray;
    },
    /////////////////////基础数据图层end
    setPopupContent(temp){//设置弹窗内容
      let html = "";
      if(temp.dataType=="地形地貌（高程）"){
        html += "高程："+temp.elevationNumber;
      }else if(temp.dataType=="地形地貌（坡度）"){
        html += "坡度："+temp.slopeNumber;
      }
      let dom = '<a href="#" class="new-ol-popup-closer"></a>'+
        '<div>'+html+'</div>';
      let div = document.createElement('div');
      div.setAttribute("class","new-ol-popup");
      div.innerHTML = dom;
      this.popupInfoLayer.setElement(div);
    },
  }
}

</script>

<style scoped>

</style>